<!DOCTYPE html>
<html>

<head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>BD离线地图3.0</title>
        <style type="text/css">
                html {
                        height: 100%
                }

                body {
                        height: 100%;
                        margin: 0px;
                        padding: 0px
                }

                #container {
                        height: 100%
                }
        </style>

        <script type="text/javascript" src="map_load.js"></script>

</head>
<style type="text/css">
        body,
        html,
        #allmap {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                font-family: "微软雅黑";
        }

        .BMap_cpyCtrl {
                display: none;
        }

        .anchorBL {
                display: none;
        }
</style>

<body>
        <div id="container"></div>
        <script src="qwebchannel.js"></script>
        <script type="text/javascript">
                var outputPath = 'tiles/'  //地图瓦片所在的文件夹
                var fromat = ".jpg"        //格式

                var map = new BMap.Map("container")

                var point = new BMap.Point(118.800248, 32.074138)  // 创建点坐标  
                map.centerAndZoom(point, 11)                       // 初始化地图，设置中心点坐标和地图级别  
                //添加地图类型控件
                map.addControl(new BMap.MapTypeControl({
                        mapTypes: [
                                BMAP_NORMAL_MAP,
                                BMAP_HYBRID_MAP
                        ]
                }));
                map.setCurrentCity("南京");           // 设置地图显示的城市 此项是必须设置的
                map.enableScrollWheelZoom(true)      //开启鼠标滚轮缩放

                new QWebChannel(qt.webChannelTransport,
                        function (channel) {
                                window.bridge = channel.objects.chanObj
                        }
                );
                var showPoint = function (lng, lat) {
                        window.bridge.showPoint(lng, lat)
                }

                function recvMessage(lng, lat) {
                        console.debug(lng)
                        console.debug(lat)
                        var point = new BMap.Point(lng, lat)
                        var marker = new BMap.Marker(point);  // 创建标注
                        map.addOverlay(marker);              // 将标注添加到地图中
                        map.centerAndZoom(point, 12);

                        var opts = {
                                width: 200,     // 信息窗口宽度
                                height: 100,     // 信息窗口高度
                                title: "江心洲鼋头石湿地风景区", // 信息窗口标题
                        }
                        var infoWindow = new BMap.InfoWindow("地址：江苏省南京市建邺区江堤路江心洲鼋头石湿地风景区", opts);  // 创建信息窗口对象 
                        marker.addEventListener("click", function () {
                                map.openInfoWindow(infoWindow, point); //开启信息窗口
                        });
                }

                //单击获取点击的经纬度
                map.addEventListener("click", function (e) {
                        showPoint(e.point.lng, e.point.lat)
                });
        </script>

</body>

</html>